<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <!-- 添加按钮 -->
      <el-button type="primary" @click="addVisible = true">添加角色</el-button>

      <!-- 角色表格 -->
      <el-table
        ref="singleTable"
        :data="perData"
        highlight-current-row
        stripe
        border
        style="width: 100%"
      >
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column property="roleName" label="角色名称" width="370">
        </el-table-column>
        <el-table-column property="roleDesc" label="角色描述" width="370">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="handleEdit(scope.row.id)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.row.id)"
              size="mini"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加角色对话框 -->
    <el-dialog
      title="添加角色"
      :visible.sync="addVisible"
      width="50%"
      @close="formSet"
    >
      <!-- 添加角色信息表单-->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleFormRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="desc">
          <el-input v-model="ruleForm.desc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRole">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改角色信息的对话框 -->
    <el-dialog
      title="编辑角色"
      :visible.sync="reviseVisible"
      width="50%"
      @close="reviseSet"
    >
      <!-- 修改角色信息表单-->
      <el-form
        :model="reviseForm"
        ref="reviseFormRef"
        :rules="reviseRules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="reviseForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="reviseForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reviseVisible = false">取 消</el-button>
        <el-button type="primary" @click="reviseInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      perData: [],
      // 添加弹框的显示于隐藏
      addVisible: false,
      // 表单选项
      ruleForm: {
        name: '',
        desc: '',
      },
      // 表单校验
      rules: {
        name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
        desc: [{ required: true, message: '请输入角色描述', trigger: 'blur' }],
      },
      // 修改角色对话框的显示隐藏
      reviseVisible: false,
      // 编辑选项
      reviseForm: {},
      // 编辑表单校验
      reviseRules: {
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
        ],
        roleDesc: [
          { required: true, message: '请输入角色描述', trigger: 'blur' },
        ],
      },
    }
  },
  created() {
    // 请求接口函数调用
    this.getRole()
  },
  methods: {
    // 发起请求
    getRole() {
      this.$http({
        url: '/roles',
        method: 'get',
      }).then((res) => {
        this.perData = res.data.data
      })
    },
    // 添加对话框关闭时，表单重置
    formSet() {
      this.$refs.ruleFormRef.resetFields()
    },
    // 添加
    addRole() {
      // 表单校验
      this.$refs.ruleFormRef.validate((value) => {
        // 校验不通过
        if (!value) {
          return
        }
        // 校验通过发起请求
        this.$http({
          url: '/roles',
          method: 'post',
          data: {
            roleName: this.ruleForm.name,
            roleDesc: this.ruleForm.desc,
          },
        }).then((res) => {
          console.log(res.data.meta.status)
          if (res.data.meta.status !== 201) {
            this.$message.error('添加角色失败')
          }

          // 对话框隐藏
          this.addVisible = false
          // 重新调用接口获取最新数据
          this.getRole()
          setTimeout(() => {
            // 提示信息
            this.$message.success('添加角色成功')
          }, 200)
        })
      })
    },

    // 编辑
    async handleEdit(id) {
      const res = await this.$http({
        url: '/roles/' + id,
        method: 'get',
      })
      if (res.data.meta.status !== 200) {
        this.$message.error('获取角色信息失败')
      }

      this.reviseForm = res.data.data
      this.reviseVisible = true
    },
    // 编辑表单重置
    reviseSet() {
      this.$refs.reviseFormRef.resetFields()
    },
    // 编辑信息的提交
    reviseInfo() {
      this.$refs.reviseFormRef.validate((value) => {
        if (!value) {
          return
        }
        // 校验通过，发起请求
        this.$http({
          url: '/roles/' + this.reviseForm.roleId,
          method: 'put',
          data: {
            roleName: this.reviseForm.roleName,
            roleDesc: this.reviseForm.roleDesc,
          },
        }).then((res) => {
          if (res.data.meta.status !== 200) {
            return this.$message.error('更新角色失败')
          }
          this.reviseVisible = false
          // 调用新数据
          this.getRole()
          // 更新数据

          setTimeout(() => {
            // 提示信息
            this.$message.success('更新角色成功')
          }, 200)
        })
      })
    },
    // 删除
    async handleDelete(id) {
      //  提醒是否删除信息
      const comfirmInfo = await this.$confirm(
        '此操作将永久删除该角色, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).catch((err) => err)

      // 如果用户点击确定，comfirmInfo为confirm字符串
      // 如果用户点击确定，comfirmInfo为cancel字符串
      if (comfirmInfo !== 'confirm') {
        return this.$message.info('已取消删除')
      }

      // 点击确定发送请求
      const { data: res } = await this.$http({
        url: '/roles/' + id,
        method: 'delete',
      })

      // 如果删除失败
      if (res.meta.status !== 200) {
        return this.$message.error('删除角色失败')
      }
      // 删除成功
      this.$message.success('删除用户成功！')
      // 再次请求新的数据
      this.getRole()
    },
  },
}
</script>

<style lang="less" scoped>
</style>
